<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: yangyongtao
 * @LastEditTime: 2024-03-15 11:04:08
-->
<template>
  <el-container style="height: 100%; padding: 10px">
    <el-aside width="220px" style="overflow: hidden">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        router
        style="height: 100%"
      >
        <el-menu-item
          index="/sedimentScheme_manage"
          route="/sedimentScheme_manage"
        >
          <span class="menu-name">方案列表</span>
        </el-menu-item>
        <el-menu-item index="/sedimentForecast" route="/sedimentForecast">
          <span class="menu-name">历史预报</span>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <span class="menu-name">参数库</span>
          </template>
          <el-menu-item index="/paramsList" route="/paramsList">
            <span class="menu-name">总参数方案</span>
          </el-menu-item>
          <el-menu-item index="/mainDataList" route="/mainDataList">
            <span class="menu-name">初始化参数</span>
          </el-menu-item>
          <el-sub-menu index="4-1">
            <template #title>
              <span class="menu-name">泥沙参数</span>
            </template>
            <el-menu-item
              index="/sedParamDataList?type=kms"
              route="/sedParamDataList?type=kms"
            >
              <span class="menu-name">挟沙力系数</span>
            </el-menu-item>
            <el-menu-item
              index="/sedParamDataList?type=eds"
              route="/sedParamDataList?type=eds"
            >
              <span class="menu-name">冲淤系数</span>
            </el-menu-item>
            <el-menu-item
              index="/sedParamDataList?type=csps"
              route="/sedParamDataList?type=csps"
            >
              <span class="menu-name">床沙级配</span>
            </el-menu-item>
            <el-menu-item
              index="/sedParamDataList?type=csgds"
              route="/sedParamDataList?type=csgds"
            >
              <span class="menu-name">床沙粒径</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/mainStreamDataList" route="/mainStreamDataList">
            <span class="menu-name">河道糙率</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- <el-menu-item index="/swForecast" route="/swForecast">
          <span class="menu-name">水位预报</span>
        </el-menu-item> -->
        <el-menu-item index="/modelFormulasList" route="/modelFormulasList">
          <span class="menu-name">单站水沙模型</span>
        </el-menu-item>
        <el-menu-item index="/rainModelList" route="/rainModelList">
          <span class="menu-name">区间降雨产流产沙模型</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main
      style="
        padding: 10px;
        margin-left: 15px;
        height: 100%;
        background-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 4px;
      "
    >
      <router-view> </router-view>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="切换为map展示"
        placement="top"
      >
        <el-icon class="icon" @click="handleClick"><Switch /></el-icon>
      </el-tooltip>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "Headers",
  setup: () => {
    const state = reactive({
      activeMenu: "",
    });
    const route = useRoute();
    const router = useRouter();

    onMounted(() => {
      state.activeMenu = route.fullPath;
    });

    const handleClick = () => {
      router.push("/Map");
    };

    return {
      ...toRefs(state),
      handleClick,
    };
  },
});
</script>

<style scoped lang="less">
.icon {
  position: absolute;
  bottom: 30px;
  font-size: 26px;
  cursor: pointer;
  color: #4290f7;
}
</style>
